<template>
    <div class="app-container">
        <el-form label-width="100">
            <el-row :gutter="15">
                <el-col :span="12">
                    <el-form-item label="扣款原因" required>
                        <el-input readonly v-model="deductionsFor" style="width:220px" placeholder="扣款原因"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="扣款金额" required>
                        <el-input readonly v-model="deductionsAmount" style="width:220px" placeholder="扣款金额"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="24" v-if="cheSunImage&&cheSunImage.length">
                    <el-form-item label="车损照片">
                        <!-- <ImageUpload readonly isArray v-model="cheSunImage" :limit="3" /> -->
                        <template v-for="item in cheSunImage">
                            <el-image :key="item" :src="item|mmvImageUrl" :preview-src-list="[$mmvImageUrl(item)]" fit="cover" style="width:160px;height:90px;margin-right:15px;"></el-image>
                        </template>
                    </el-form-item>
                </el-col>
                <el-col :span="24" v-if="maintainImage&&maintainImage.length">
                    <el-form-item label="维修单据">
                        <!-- <ImageUpload readonly isArray v-model="maintainImage" :limit="3" /> -->
                        <template v-for="item in maintainImage">
                            <el-image :key="item" :src="item|mmvImageUrl" :preview-src-list="[$mmvImageUrl(item)]" fit="cover" style="width:160px;height:90px;margin-right:15px;"></el-image>
                        </template>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
    </div>
</template>

<script>
import * as api from '@/api/order/settlement';

export default {
    dicts: ['settlement_type', 'settlement_deductionsWay'],
    props: ['id'],
    data() {
        return {
            type: 1, // 结算类型(1押金结算 2违章结算)
            deductionsWay: 1, // 扣款方式(1押金抵扣 2线下补缴)
            deductionsFor: '', // 扣款原因
            deductionsAmount: '', // 扣款金额
            cheSunImage: [], // 车损照片
            maintainImage: [], // 维修单据
        };
    },
    computed: {
        formData() {
            const formData = {
                id: this.id,
                type: this.type, // 结算类型(1押金结算 2违章结算)
                deductionsWay: this.deductionsWay, // 扣款方式(1押金抵扣 2线下补缴)
                deductionsFor: this.deductionsFor, // 扣款原因
                deductionsAmount: this.deductionsAmount, // 扣款金额
                cheSunImage: this.cheSunImage, // 车损照片
                maintainImage: this.maintainImage, // 维修单据
            };
            return formData;
        },
    },
    mounted() {
        if (this.id) {
            this.getData();
        }
    },
    methods: {
        emitData() {
            return this.formData;
        },
        getData() {
            api.getSettlement(this.id).then(response => {
                this.id = response.data.id;
                this.type = response.data.type; // 结算类型(1押金结算 2违章结算)
                this.deductionsWay = response.data.deductionsWay; // 扣款方式(1押金抵扣 2线下补缴)
                this.deductionsFor = response.data.deductionsFor; //' 扣款原因
                this.deductionsAmount = response.data.deductionsAmount; //' 扣款金额
                this.cheSunImage = response.data.cheSunImage; // 车损照片
                this.maintainImage = response.data.maintainImage; // 维修单据
            });
        },
        submitData() {
            api.addSettlement(this.formData).then(response => {
                this.$message.success(response.msg);
            });
        },
    },
}
</script>
